<script setup>
  const blogPosts = ref([
    // 模拟添加一篇2026年的博客，展示未来扩展性
    {
      date: '01-01',
      year: '2026',
      title: '2026年第一篇博客占位',
      link: 'javascript:;',
      category: 'Vue'
    },
    {
      date: '09-30',
      year: '2025',
      title: 'Vue3中基于路由的动态递归菜单组件实现',
      link: 'https://blog.csdn.net/Demon_chen_/article/details/152322058?spm=1001.2014.3001.5502',
      category: 'Vue'
    },
    {
      date: '09-29',
      year: '2025',
      title: 'MockJS的局限性及解决方案：如何通过vite-plugin-mock实现请求头拦截',
      link: 'https://blog.csdn.net/Demon_chen_/article/details/152237712?spm=1001.2014.3001.5502',
      category: 'Vue'
    },
    {
      date: '09-23',
      year: '2025',
      title: 'JavaScript中的属性描述符：深入理解对象属性的控制机制',
      link: 'https://blog.csdn.net/Demon_chen_/article/details/152002168?spm=1001.2014.3001.5502',
      category: 'JavaScript'
    },
    {
      date: '09-19',
      year: '2025',
      title: '深入解析浏览器事件循环：从进程模型到同步异步与任务队列',
      link: 'https://blog.csdn.net/Demon_chen_/article/details/151842326?spm=1001.2014.3001.5502',
      category: 'JavaScript'
    },
    {
      date: '09-13',
      year: '2025',
      title: 'Vue的通用组件通信工具——Vuex和Pinia入门指南',
      link: 'https://blog.csdn.net/Demon_chen_/article/details/151653484?spm=1001.2014.3001.5502',
      category: 'Vue'
    },
    {
      date: '09-12',
      year: '2025',
      title: 'VsCode中关于Vue项目代码格式化和eslint规范的配置',
      link: 'https://blog.csdn.net/Demon_chen_/article/details/151588036?spm=1001.2014.3001.5502',
      category: 'Vue'
    },
    {
      date: '09-11',
      year: '2025',
      title: 'JavaScript模块化学习复习笔记',
      link: 'https://blog.csdn.net/Demon_chen_/article/details/151563816?spm=1001.2014.3001.5502',
      category: 'JavaScript'
    },
    {
      date: '09-10',
      year: '2025',
      title: 'Mock.js入门指南：拦截axios请求，生成随机数据，独立开发前端',
      link: 'https://blog.csdn.net/Demon_chen_/article/details/151440652?spm=1001.2014.3001.5502',
      category: 'JavaScript'
    },
    {
      date: '09-08',
      year: '2025',
      title: 'TypeScript学习笔记',
      link: 'https://blog.csdn.net/Demon_chen_/article/details/151334783?spm=1001.2014.3001.5502',
      category: 'TypeScript'
    },
    {
      date: '09-07',
      year: '2025',
      title: 'jQuery库学习笔记',
      link: 'https://blog.csdn.net/Demon_chen_/article/details/151296439?spm=1001.2014.3001.5502',
      category: 'JavaScript'
    },
    {
      date: '09-05',
      year: '2025',
      title: 'JavaScript 中的 Web APIs —— BOM 和 DOM 学习复习笔记',
      link: 'https://blog.csdn.net/Demon_chen_/article/details/151230022?spm=1001.2014.3001.5502',
      category: 'JavaScript'
    },
    {
      date: '09-04',
      year: '2025',
      title: 'JavaScript语法学习复习笔记',
      link: 'https://blog.csdn.net/Demon_chen_/article/details/151180155?spm=1001.2014.3001.5502',
      category: 'JavaScript'
    },
    {
      date: '08-17',
      year: '2025',
      title: 'Node.js版本控制工具 nvm 的使用指南（配合 nrm 快速切换 npm 源）',
      link: 'https://blog.csdn.net/Demon_chen_/article/details/150472831?spm=1001.2014.3001.5502',
      category: 'Node.js'
    },
    {
      date: '08-15',
      year: '2025',
      title: '高效管理每一天：打造你的专属待办清单todolist',
      link: 'https://blog.csdn.net/Demon_chen_/article/details/150402748?spm=1001.2014.3001.5502',
      category: 'Vue'
    },
    {
      date: '08-13',
      year: '2025',
      title: '＜el-menu＞菜单组件中 router 和 default-active 属性的使用技巧（解决一级路由导航项和二级路由导航项不能同时高亮的问题）',
      link: 'https://blog.csdn.net/Demon_chen_/article/details/150290528?spm=1001.2014.3001.5502',
      category: 'Vue'
    },


  ])

  // 博客总数
  const totalPosts = ref(blogPosts.value.length)
  const selectedCategory = ref('全部')

  // 获取所有分类
  const categories = ref(['全部', ...Array.from(new Set(blogPosts.value.map(post => post.category)))])

  // 根据选中的分类过滤博客
  const filteredPosts = ref(blogPosts.value)

  // 监听分类变化
  selectedCategory.value = '全部'

  // 过滤博客函数
  const filterPosts = (category) => {
    selectedCategory.value = category
    if (category === '全部') {
      filteredPosts.value = blogPosts.value
    } else {
      filteredPosts.value = blogPosts.value.filter(post => post.category === category)
    }
  }
  // 计算当前显示的博客数量文本（添加更语义化的描述）
  const postCountText = computed(() => {
    if (selectedCategory.value === '全部') {
      return `共 ${filteredPosts.value.length} 篇博客`
    } else {
      return `${selectedCategory.value} 分类 ${filteredPosts.value.length} 篇博客`
    }
  })
  // 新增：按年份分组博客数据的计算属性
  const postsByYear = computed(() => {
    // 创建一个Map来按年份存储博客
    const yearMap = new Map()

    // 遍历过滤后的博客，按年份分组
    filteredPosts.value.forEach(post => {
      // 确保每个博客都有year属性
      const postYear = post.year || '2025' // 默认年份为2025
      if (!yearMap.has(postYear)) {
        yearMap.set(postYear, [])
      }
      yearMap.get(postYear).push(post)
    })

    // 转换为按年份降序排列的数组
    return Array.from(yearMap.entries())
      .sort(([yearA], [yearB]) => yearB - yearA)
      .map(([year, posts]) => ({ year, posts }))
  })

</script>

<template>
  <div class="blog-container">
    <main class="blog-content">
      <!-- 页面标题区域 -->
      <div class="header-section">
        <h1 class="page-title">
          <span
            class="title-word"
            v-for="(word, index) in '我的博客'.split('')"
            :key="index"
          >
            {{ word }}
          </span>
        </h1>
        <p class="subtitle">记录技术成长的点滴，分享编程的乐趣</p>
      </div>

      <!-- 分类过滤器 -->
      <div
        class="category-filter"
        v-if="categories.length > 1"
      >
        <el-tag
          v-for="category in categories"
          :key="category"
          :type="selectedCategory === category ? 'primary' : 'info'"
          @click="filterPosts(category)"
          class="category-tag"
          :closable="false"
        >
          {{ category }}
        </el-tag>
      </div>

      <!-- 博客归档卡片 - 单个卡片包含所有年份 -->
      <el-card class="blog-archive-card">
        <!-- 总体统计信息 -->
        <div class="year-header">
          <div class="header-content">
            <h2 class="year-title">博客汇总</h2>
            <span class="post-count-badge">
              <el-icon :size="16">
                <i-ep-document />
              </el-icon>
              {{ postCountText }}
            </span>
          </div>
          <div class="divider"></div>
        </div>

        <!-- 按年份分组显示时间线 -->
        <div
          v-for="yearGroup in postsByYear"
          :key="yearGroup.year"
          class="year-section"
        >
          <!-- 年份标题和统计 -->
          <div class="year-section-header">
            <h3 class="year-section-title">{{ yearGroup.year }}</h3>
            <span class="year-section-count">
              {{ yearGroup.posts.length }} 篇
            </span>
          </div>

          <!-- 年份分隔线 -->
          <div class="year-section-divider"></div>

          <!-- 该年份的博客时间线 -->
          <el-timeline class="year-timeline">
            <el-timeline-item
              v-for="(post, index) in yearGroup.posts"
              :key="index"
              :timestamp="post.date"
              placement="top"
              class="timeline-item"
            >
              <div class="post-wrapper">
                <a
                  :href="post.link"
                  class="post-title"
                  :title="post.title"
                >
                  {{ post.title }}
                </a>
                <el-tag
                  size="small"
                  class="category-label"
                >{{ post.category }}</el-tag>
              </div>
            </el-timeline-item>
          </el-timeline>
        </div>

        <!-- 空状态 -->
        <!-- <el-empty
          v-if="filteredPosts.length === 0"
          description="暂无博客文章"
          class="empty-state"
        /> -->
      </el-card>

      <!-- 页脚装饰 -->
      <div class="footer-decoration">
        <div class="decoration-line"></div>
        <div class="decoration-dot"></div>
        <div class="decoration-line"></div>
      </div>
    </main>
  </div>
</template>

<style scoped>
  /* 全局样式变量 */


  .blog-container {
    min-height: 100vh;
    background-color: var(--bg-color);
    color: var(--text-color);
    padding-top: 80px;
    /* 为固定导航栏留出空间 */
    padding-bottom: 3rem;
    background-image: radial-gradient(circle at 25% 25%,
        rgba(64, 158, 255, 0.05) 0%,
        transparent 50%),
      radial-gradient(circle at 75% 75%,
        rgba(103, 194, 58, 0.05) 0%,
        transparent 50%);
    background-attachment: fixed;
  }

  .blog-content {
    padding: 2rem;
    max-width: 1000px;
    margin: 0 auto;
  }

  /* 页面标题样式 */
  .header-section {
    text-align: center;
    margin-bottom: 2rem;
    position: relative;
  }

  .page-title {
    font-size: 3rem;
    margin-bottom: 0.5rem;
    color: var(--primary-color);
    text-align: center;
    font-weight: 700;
    letter-spacing: -0.025em;
  }

  .title-word {
    display: inline-block;
    opacity: 0;
    transform: translateY(20px);
    animation: fadeInUp 0.6s ease forwards;
  }

  /* 为每个文字添加不同的动画延迟 */
  .title-word:nth-child(1) {
    animation-delay: 0.1s;
  }

  .title-word:nth-child(2) {
    animation-delay: 0.2s;
  }

  .title-word:nth-child(3) {
    animation-delay: 0.3s;
  }

  .title-word:nth-child(4) {
    animation-delay: 0.4s;
  }

  .subtitle {
    font-size: 1.1rem;
    color: var(--text-secondary);
    margin: 0;
    opacity: 0;
    animation: fadeInUp 0.6s ease 0.5s forwards;
  }

  /* 分类过滤器样式 */
  .category-filter {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 2rem;
    justify-content: center;
    opacity: 0;
    animation: fadeInUp 0.6s ease 0.7s forwards;
  }

  .category-tag {
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 0.9rem;
    padding: 0.3rem 0.8rem;
  }

  .category-tag:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  }

  /* 博客归档卡片 */
  .blog-archive-card {
    background-color: var(--card-bg);
    border-radius: 16px;
    padding: 2rem;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    border: 1px solid var(--border-color);
    opacity: 0;
    transform: translateY(30px);
    animation: fadeInUp 0.8s ease 0.9s forwards;
    transition: all 0.3s ease;
  }

  .blog-archive-card:hover {
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.12);
    transform: translateY(-2px);
  }

  /* 年份标题区域 - 更语义化的样式 */
  .header-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1rem;
    flex-wrap: wrap;
    gap: 0.5rem;
  }

  .year-title {
    font-size: 1.8rem;
    font-weight: 600;
    color: var(--text-color);
    margin: 0;
    display: inline-block;
  }

  /* 博客总数徽章 - 更语义化的样式 */
  .post-count-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.4rem 0.8rem;
    border-radius: 20px;
    font-size: 0.95rem;
    font-weight: 500;
    background-color: #f0f5ff;
    color: var(--primary-color);
    border: 1px solid rgba(64, 158, 255, 0.2);
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
  }

  .divider {
    height: 2px;
    background: linear-gradient(90deg, var(--primary-color), transparent);
    margin: 1rem auto;
    border-radius: 1px;
  }

  /* 新增：年份分组样式 */
  .year-section {
    margin-top: 2rem;
  }

  .year-section:first-child {
    margin-top: 0;
  }

  .year-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.5rem;
  }

  .year-section-title {
    font-size: 1.4rem;
    font-weight: 600;
    color: var(--text-color);
    margin: 0;
  }

  .year-section-count {
    font-size: 0.9rem;
    color: var(--text-secondary);
    background-color: #f4f4f5;
    padding: 0.2rem 0.6rem;
    border-radius: 12px;
  }

  .year-section-divider {
    height: 1px;
    background-color: var(--border-color);
    margin-bottom: 1rem;
  }

  .year-timeline {
    padding-left: 1.5rem;
  }

  /* 博客条目样式 */
  .timeline-item {
    transition: all 0.3s ease;
  }

  .post-wrapper {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    position: relative;
  }

  .post-title {
    color: var(--text-color);
    font-size: 1.1rem;
    text-decoration: none;
    transition: all 0.3s ease;
    display: inline-block;
    font-weight: 500;
    position: relative;
    padding: 0.3rem 0;
  }

  .post-title::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background-color: var(--primary-color);
    transition: width 0.3s ease;
  }

  .post-title:hover {
    color: var(--primary-color);
    transform: translateX(5px);
  }

  .post-title:hover::after {
    width: 100%;
  }

  .category-label {
    margin-left: auto;
    opacity: 0.8;
    font-size: 0.8rem;
    transition: all 0.3s ease;
  }

  .post-wrapper:hover .category-label {
    opacity: 1;
    transform: scale(1.05);
  }

  /* 空状态样式 */
  :deep(.el-empty) {
    margin: 3rem 0;
  }

  /* 页脚装饰 */
  .footer-decoration {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 3rem;
    opacity: 0;
    animation: fadeIn 1s ease 1.5s forwards;
  }

  .decoration-line {
    height: 1px;
    width: 40px;
    background-color: var(--border-color);
  }

  .decoration-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: var(--primary-color);
    margin: 0 8px;
  }

  /* 动画定义 */
  @keyframes fadeInUp {
    from {
      opacity: 0;
      transform: translateY(20px);
    }

    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  @keyframes fadeIn {
    from {
      opacity: 0;
    }

    to {
      opacity: 1;
    }
  }

  /* 响应式设计 */
  @media (max-width: 768px) {
    .blog-content {
      padding: 1rem;
    }

    .page-title {
      font-size: 2.5rem;
    }

    .blog-archive-card {
      padding: 1.5rem;
    }

    .year-title {
      font-size: 1.5rem;
    }

    .post-title {
      font-size: 1rem;
    }

    .category-tag {
      font-size: 0.8rem;
      padding: 0.25rem 0.6rem;
    }
  }

  @media (max-width: 480px) {
    .blog-content {
      padding: 0.8rem;
    }

    .page-title {
      font-size: 2rem;
    }

    .subtitle {
      font-size: 0.95rem;
    }

    .blog-archive-card {
      padding: 1.2rem;
      border-radius: 12px;
    }

    :deep(.el-timeline-item__timestamp.is-top) {
      font-size: 0.85rem;
    }

    .post-wrapper {
      flex-direction: column;
      align-items: flex-start;
      gap: 0.4rem;
    }

    .category-label {
      margin-left: 0;
    }

    .header-content {
      flex-direction: column;
      align-items: flex-start;
      gap: 0.5rem;
    }

    .post-count-badge {
      width: 100%;
      justify-content: center;
    }
  }
</style>